<template>
  <div> 
    <HeaderNav :title="$t('m.headernav.SEELIST')" :showBack='true' />
    <div class="contact_list" v-if="list.length > 0" >
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        :offset='10'
        v-model="loading"
        :finished="finished"
        :finished-text="$t('m.msg.MSG6')"
        :error.sync="error"
        :error-text="$t('m.msg.MSG7')"
        @load="loadData"
      >
	      <router-link class="contact_item" v-for="(item,index) in list" :key="index" :to="`/userInfo?type=2&id=${item.visitorId}`">
	        <div class="contact_portrait">
          <img :src="item.httpAvatar" class="contact_portrait" />
        </div>
	        <div class="contact_message">
	          <span class="contact_name">{{item.name}}</span>
	          <!-- <div class="contact_age">{{item.age}}岁</div> -->
	        </div>
          <div class="contact_time">{{item.createDate}}</div>
	        <!-- <van-icon name="chat" size="40px" color="#00a0e9" class="contact_chat" />
	        <van-icon name="gift" size="40px" color="#00a0e9" class="contact_gift" /> -->
	      </router-link>
        </van-list>
      </van-pull-refresh>
	   </div>
     <div v-else>
       <img src="../../assets/img/nonedata.png" class="nonedata"/>
     </div>
  </div>
</template>

<script>
	import {
    Icon,
    List,
    PullRefresh 
  } from 'vant';
import HeaderNav from '@/components/HeaderNav.vue'
import {postQuery, getQuery} from '@/api/query';
export default {
  name: 'visitList',
  components: {
    [Icon.name]: Icon,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    HeaderNav
  },
  data(){
    return {
      title: '',
      page: 1,
      list:[],
      pages: 0,
      loading: false,
      error: false,
      finished: false,
      refreshing: false
    }
  },
  methods: {
     onRefresh() {
      // 清空列表数据
      this.finished = false;
      //初始化
      this.pages = 0;
      this.list = [];
      this.page = 1;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.loadData();
    },
    loadData(){
      var that = this;
      if(that.pages > 0 && that.page > that.pages){
        that.finished = true;
      }
      let params = {
        page: that.page
      }
      getQuery('/member/accessLog/list', params)
        .then (res => {
          if(res.code == 200){
            //如果数据不够finished
            if(res.data.records.length < 10){
              that.finished = true;
            }
            that.list = that.list.concat(res.data.records)
            that.pages = res.data.pages;
            that.page ++;
            that.loading = false;
            that.refreshing = false;
          }else{
            that.$toast.fail(res.msg);
            that.finished = true;
          }
        }).catch(function (error) {
          that.error = true;     
        });
    }
  },
  mounted() {

  },
  created(){
    this.loadData();
  }
}
</script>
<style scoped>
  .contact_item {
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: black;
  }

 .contact_portrait {
    width: 110px;
    height: 100px;
    margin: 0px 20px;
    border-radius: 50%;
    overflow: hidden;
  }

  .contact_message {
    width: 430px;
    height: 100px;
    line-height: 50px;
  }

  .contact_age{
    font-size: 24px;
    color:#a1a1a1;
  }

  .contact_isOnline {
    font-weight: bold;

  }

  .contact_name {
    font-weight: bold;
    font-size: 28px;
  }

  .contact_chat {
    margin-left: auto;
  }

  .contact_gift {
    margin-right: 20px;
  }

 

</style>
